<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <div>
        <el-row :gutter="24" class="el-row">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="库名">
              <el-select v-model="query.schemaName" placeholder="请选择" class="dialog-input">
                <el-option v-for="(item,index) in this.schemaNameList" :key="item.index" :label="item" :value="item"/>
              </el-select>
            </el-form-item>
            <el-form-item label="表名">
              <el-select v-model="query.tableName" placeholder="请选择" class="dialog-input">
                <el-option v-for="(item,index) in this.tableNameList" :key="item.index" :label="item" :value="item"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleFilter">查询</el-button>
              <el-button type="info" icon="el-icon-delete" v-on:click="resetData">清空</el-button>
              <el-button
                         type="warning" icon="el-icon-search" @click="handleRefresh">更新血缘
              </el-button>
              <el-button type="success"
                @click="createHiveTable"
              >新建Hive表
              </el-button>
              <!-- 使用组件-->
              <createHiveTable  v-if="openCreateHiveTable" ref="createHiveTable"/>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
    </div>
    <!--    由listLoading决定是否加载-->
    <el-table stripe :data="tableInfolist" v-loading="listLoading" element-loading-text="Loading..."
              border fit highlight-current-row
              style="width: 100%;margin:20px 0" align="center"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column
        prop="tableName"
        label="表名"
        width="200">
        <template slot-scope="scope">
          <span style="color:red;" @click="handleUpdate(scope.row.tableName )">{{ scope.row.tableName }}</span>
          <!--          <el-button  size="mini" type="danger" icon="el-icon-edit" @click="handleUpdate(scope.row.id)"></el-button>-->
        </template>
      </el-table-column>
      <el-table-column
        prop="schemaName"
        label="库名"
        width="100px">
      </el-table-column>
      <el-table-column
        prop="hasTask"
        label="是否有任务"
        width="100px">
      </el-table-column>
      <el-table-column
        prop="tableSize"
        label="数据量"
        width="80px">
      </el-table-column>
      <el-table-column
        prop="tableLastModifySize"
        label=" 数据最后更新数据大小">
      </el-table-column>
      <el-table-column
        prop="tableLastModifyTime"
        label="数据最后更新时间">
      </el-table-column>
      <el-table-column
        prop="monitorCount"
        label="质量监控个数">
      </el-table-column>
      <el-table-column
        prop="tecOwnerUserName"
        label="技术负责人"
        width="100px">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />
  </div>
</template>

<script>

import tableInfoApi from '@/api/assets/tableInfo'
import lineage from "@/api/assets/lineage";
import createHiveTable from "@/views/assets/createTable";
import {Message} from "element-ui";

export function isSpace(str) {
  const reg = /(^\s+)|(\s+$)|\s+/g
  return reg.test(str)
}

export default {
  components: {createHiveTable},
  data() {
    return {
      // 显示窗口
      openCreateHiveTable:false,
      value: true,
      dialogFormVisible: false,
      dialogStatus: '',
      listLoading: false,
      tableNameList: [],
      schemaNameList: [],
      query: {
        schemaName: "",
        tableName: "",
      },
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 20, // 每页记录数
      tableInfolist: [],
    }
  },
  created() {
    this.fetchData()
    this.getQueryList()
  },
  methods: {
    //跳转到表详情页面
    handleUpdate(tableName) {
      this.$router.push({path: "/assets/assets/detail", query: {"tableName": tableName}})
    },
    //查询条件集合
    getQueryList() {
      tableInfoApi.getQueryList().then(response => {
        this.tableNameList = response.data.tableNameList
        this.schemaNameList = response.data.schemaNameList
      })
    },
    // 当页码发生改变的时候
    changeSize(size) {
      console.log(size)
      this.limit = size
      this.fetchData(1)
    },

    // 加载banner列表数据
    fetchData(page = 1) {
      console.log('翻页。。。' + page)
      // 异步获取远程数据（ajax）
      this.page = page
      /**
       * 各渠道流量统计接口
       */
      tableInfoApi.getTableInfoList(this.query, this.page, this.limit).then(response => {
        // console.log("-----" + this.query.startDate)
        this.listLoading = true
        this.tableInfolist = response.data.records
        // console.log("========tableData"+this.tableData)
        this.total = response.data.total
        this.listLoading = false

      })
    },
    //查询
    handleFilter() {
      this.query.pageNo = 1
      this.fetchData()
    },
    //清空
    resetData() {
      this.query.tableName = null
      this.query.schemaName = null
    },
    //更新血缘
    handleRefresh() {
      lineage.refresh().then(response => {
        console.log(response);
        if (response == "success") {
          Message.success('血缘关系更新成功！')
        }

        //   this.cData = response;
        //   this.setChartData();
      })
        .catch((response) => {
          console.log("失败" + response);
          Message.error('服务器错误，请稍后再试')
          //reject(response)
        });
    },
    // 按钮方法:弹出添加告警规则页面,以为这里是一个数组，所以需要加索引
    createHiveTable() {
      this.openCreateHiveTable = true;
      //调用子页面方法
      this.$nextTick(() => {
        this.$refs.createHiveTable.init();
      });
    },
  }

}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
